
<template>
    <Myhead title="登录">
        <van-icon name="cross" size="30" @click="touser" color="oraige" />
    </Myhead>
    <div class="tabs">
        <van-tabs v-model:active="active" swipeable>
            <van-tab v-for="item in list" :title="item">
                <div class="form" v-if="active == 0">
                    <div class="welcom">欢迎密码登录</div>
                    <van-form @submit="onSubmit">
                        <van-cell-group inset>
                            <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                                :rules="[{ required: true, message: '请填写用户名' }]" />
                            <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                                :rules="[{ validator, message: '请填写6-12位密码' }]" />
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">
                                提交
                            </van-button>
                            <van-button round block type="danger" @click="clean" class="clean">
                                重置
                            </van-button>
                        </div>
                    </van-form>
                    <div class="towhere">
                        <span style="color:red" @click="toreg">注册</span>
                        <span style="color: #99A6C4;"  @click="tofindps">找回密码</span>
                    </div>
                </div>
                <div class="phonelogin" v-else>
                    <div class="welcom">欢迎验证码登录</div>
                    <van-form @submit="onSubmit">
                        <van-cell-group inset>
                            <van-field v-model="phone" name="phone" label="手机号" placeholder="手机号"
                                :rules="[{ required: true, message: '请填写手机号' }]" />
                            <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
                                :rules="[{ required: true, message: '请填写验证码' }]">
                                <template #button>
                                    <van-button size="small" type="primary" @click="send" :disabled=flag>{{ flag ? '剩余' +
                                        time + '秒' : '发送验证码'
                                    }}</van-button>
                                </template>
                            </van-field>
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">
                                提交
                            </van-button>
                            <van-button round block type="danger" @click="clean" class="clean">
                                重置
                            </van-button>
                        </div>
                    </van-form>
                    <div class="towhere">
                        <span style="color:red" @click="toreg">注册</span>
                        <span style="color: #99A6C4;" @click="tofindps">找回密码</span>
                    </div>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
import { useComon } from '../../Hooks/comon';
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { GetUserLogin, GetCodeLogin, UserVerifyCode, FindUserInfo } from './userapi'
import { userStore } from '../../stores/userinfo'
import { useRoute } from 'vue-router';

const route = useRoute()
const store = userStore()
const { gotowhere } = useComon()
const time = ref(60)
const active = ref(0)
const username = ref('')
const password = ref('')
const flag = ref(false)
const phone = ref('')
const sms = ref('')
const regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

const getphone = () => {//是否能从route中取到phone
    if (route.query.phone) {
        phone.value = route.query.phone
    } else {
        phone.value = ''
    }
}
const tofindps = () => {//跳转找回密码
    console.log(123);
    gotowhere('/find/pass')
}
onMounted(() => {
    // 先判断是否能获取phone
    getphone()
})
const countdown = () => {//倒计时
    flag.value = true
    let timer = null
    timer = setInterval(() => {
        time.value -= 1
        if (time.value == 0) {
            clearInterval(timer)
            time.value = 60
            flag.value = false
        }
    }, 1000)
}
const finduser = async () => {//查找用户
    const res2 = await FindUserInfo({ phone: phone.value })
    console.log(res2);
    if (res2.data.code == 200) {
        const params = {
            username: res2.data.result.username,
            password: res2.data.result.password
        }
        uselogin(params)
    }
}
const verifycode = async () => {//验证验证码
    const res = await UserVerifyCode({ phone: phone.value, captcha: sms.value })
    console.log(res);
    if (res.data.code == 200) {
        finduser()
    }
}
const sendcode = async () => {//获取验证码
    const res = await GetCodeLogin({ phone: phone.value })
    if (res.data.code == 200) {
        showToast({
            message: '验证码发送成功'
        })
        countdown()
    } else {
        showToast({
            message: res.data.message
        })
    }
}
const send = () => {//发送按钮
    sendcode()
}
const uselogin = async (params) => {//登录
    const res = await GetUserLogin(params)
    console.log(res);
    if (res.data.code == 200) {
        let token = res.data.token
        let name = res.data.result.username
        let phone = res.data.result.phone
        store.setUserToken(token)
        store.setUserName(name)
        store.setUserPhone(phone)
        localStorage.setItem('userToken', token)
        localStorage.setItem('userName', name)
        localStorage.setItem('userPhone', phone)
        console.log(store.getUserToken);
        gotowhere('/user')
    } else {
        console.log('登录失败');
    }
}
const onSubmit = async (el) => {//提交
    if (active.value == 1) {
        if (!regphone.test(phone.value)) {
            showToast({
                message: '请输入正确手机号'
            })
        } else {
            verifycode()
        }
    } else {
        console.log(el);
        uselogin(el)
    }
}
const toreg = () => {//去注册
    gotowhere('/user/reg')
}
const clean = () => {//清空
    if (active.value == 0) {
        username.value = ''
        password.value = ''
    } else {
        phone.value = ''
        sms.value = ''
    }
}
const validator = (val) => {//验证规则
    if (val.length < 6 || val.length > 12) {
        return false
    }
}
const list = [
    '密码登录',
    '手机登录'
]
const touser = () => {
    gotowhere('/user')
}


</script>

<style lang="scss" scoped>
.clean {
    margin-top: 16px;
}

.tabs {
    margin-top: 10px;

    .form {
        .sub {
            width: 80%;
        }

    }

    .welcom {
        font-size: 16px;
        color: #99A6C4;
        margin-left: 30px;
        line-height: 50px;
        width: 60%;
    }

    .towhere {
        line-height: 50px;
        margin: 0 auto;
        width: 90%;
        display: flex;
        justify-content: space-between;
    }

    .btns {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
    }
}
</style>